<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新建角色</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" type="text/css" href="assets/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="assets/css/all.css"  />
		<link rel="stylesheet" href="assets/zTree/css/zTreeStyle.css" type="text/css">
		<style>
			.layui-input-4 {
			    width: 600px;
			    float: left;
			}
			.layui-elem-field{
				width:800px;
			}
			.layui-elem-field legend{
				font-size: 14px;
			}
			ul.ztree li span.button.switch{margin-right:5px}
		    ul.ztree>li{padding: 8px;}
		    ul.ztree>li ul li{margin-top: 8px;padding: 5px;}
		    ul.ztree>li ul li ul li{background: #f6fbff;padding: 5px;}
		    ul.ztree>li ul li ul li ul li{background: #fff;padding: 5px;}
		    ul.ztree ul ul ul li{display:inline-block;}
		    ul.ztree>ul li>ul>li{padding:5px}
		    ul.ztree>ul li>ul{margin-top:12px}
		    ul.ztree>ul li{padding:15px;padding-right:25px}
		    ul.ztree>ul li{white-space:normal!important;background: #01AAED}
		    ul.ztree li{white-space:inherit;}
		    ul.ztree>li>a>span{font-size:14px;font-weight:700}
		</style>
	</head>
<body style="background-color:#fff;padding:20px;">
	<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
	<!--[if lt IE 9]>
		  <script src="assets/js/html5.min.js"></script>
		  <script src="assets/js/respond.min.js"></script>
		<![endif]-->
    <form class="layui-form" action="" onsubmit="return false;">
   		 <div class="layui-form-item">
            <label class="layui-form-label">岗位名称</label>
            <div class="layui-input-4">
                <input type="text" name="name" lay-verify="required" placeholder="岗位名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属部门</label>
            <div class="layui-input-4">
                <input id="department" type="text" name="company" class="layui-input" placeholder="所属部门" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-4">
                <input type="text" name="tip"  placeholder="备注" class="layui-input" >
            </div>
        </div>
        <fieldset class="layui-elem-field">
            <legend>配置权限</legend>
        	<ul id="treeRole" class="ztree"></ul>
        </fieldset>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit="" lay-filter="submit-btn">确定</button>
                <button class="layui-btn cancelBtn layui-btn-danger">取消</button>
            </div>
        </div>
    </form>
	<script src="assets/layui/layui.js" type="text/javascript"></script>
	<script src="assets/js/all.js" type="text/javascript"></script>
	<script type="text/javascript">
		layui.use(['layer','form'],function(){
			var layer = layui.layer,
				form = layui.form,
				$ = layui.$
			
			//自定义验证规则
			form.verify({
				psw:[/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,'密码必须是6到20位的数字和字母'],
				mailAddress:[/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/,'您输入的电子邮件地址不合法'],		
				phoneNum:[/^1\d{10}$/,'您输入的手机号码不合法']
			});
			//监听提交
			form.on('submit(submit-btn)', function(data) {
				$.ajax({
					type:"post",
					url:"{:U('manager/System/site')}",
					data:data.field,
					dataType:"json",
					success:function(data){
						if (data.code == 1) {
							layer.msg(data.msg,{icon:6,time:1000}, function(){
								top.location.reload();
							});
						} else {
							layer.msg(data.msg, {icon:5,time:1000});
						}
					},
					error: function(jqXHP,textStatus,errorThrown){
	                    layer.alert(jqXHP.responseText);
	                }
				});
				return false;
			});
			
			$("#department").click(function(){
				var index = layer.open({
					type:2,
					area:['500px','400px'],
					content:'chooseDepart.html',
					btn:["确认"],
					yes:function(idnex,layero){
						var body = layer.getChildFrame('body', index);
		                var iframeWin = window[layero.find('iframe')[0]['name']];//得到iframe页的窗口对象，执行iframe页的方法：
		                var ids = iframeWin.getVal();//调用子页面的方法，得到子页面返回的ids
		                $("#department").val(ids);
		                layer.close(index);//需要手动关闭窗口
					}
				})
			})
		})
	</script>
	<script type="text/javascript" src="assets/js/jquery-1.8.1.min.js"></script>
	<script type="text/javascript" src="assets/zTree/js/jquery.ztree.core.min.js"></script>
	<script type="text/javascript" src="assets/zTree/js/jquery.ztree.excheck.min.js"></script>
	<script type="text/javascript">
	    var setting = {
	        check:{enable: true},
	        view: {showLine: true, showIcon: true, dblClickExpand: true },
	        data: {
	            simpleData: {enable: false, pIdKey:'pid', idKey:'id'},
	            key:{name:'name',children:'children'}
	        }
	    };
	    //var zNodes = {$data};
	    var zNodes = [
			{ "id":1,"pid":0,"name":"总公司",
				children: [
				{ "id":3, "name":"山西分公司"},
				{ "id":4, "name":"河北分公司"},
				{ "id":5, "name":"河南分公司"}
				]
			},
			{ "id":2, "pid":1,"name":"总公司1"  }
		];
	    function setCheck() {
	        var zTree = $.fn.zTree.getZTreeObj("treeRole");
	        zTree.setting.check.chkboxType = { "Y":"ps", "N":"ps"};
	
	    };
	    $.fn.zTree.init($("#treeRole"), setting, zNodes);
	    setCheck();
	    

	</script>
</body>
</html>
